<template>
  <div class="dataShowChart">
    <el-card shadow="never">
      <div slot="header" class="clearfix">
        <n-title title="调查进度柱状图"/>
      </div>
      <div id="chartBar" style="width: 100%;height: 400px;"></div>
    </el-card>
  </div>
</template>

<script lang="ts">
import {Component, Prop, Vue, Watch} from 'vue-property-decorator';
import NTitle from "@/components/NTitle.vue";
import * as echarts from 'echarts'

@Component({
  components: {NTitle}
})
export default class DataShowChart extends Vue {
  @Prop() chartData!: any;
  private chartInstance: any = null

  mounted() {
    this.initChar()
  }

  initChar() {
    let ctxDom = document.getElementById('chartBar')
    this.chartInstance = echarts.init(ctxDom)
    this.updateChart();
  }

  updateChart() {
    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '1%',
        right: '1%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: this.chartData.axis,
      },
      series: this.chartData.series
    };
    this.chartInstance.setOption(option);
  }

  // 监听 chartData 的变化
  @Watch('chartData')
  onChartDataChange(newVal: any, oldVal: any) {
    // 当数据变化时更新图表
    this.updateChart();
  }
}
</script>
<style lang="scss" scoped>
.dataShowChart {
  margin-top: 12px;
}
</style>
